<?php get_header(); ?>

<div class="archive-container">
    <header class="archive-header">
        <?php
        the_archive_title('<h1 class="archive-title">', '</h1>');
        the_archive_description('<div class="archive-description">', '</div>');
        ?>
    </header>

    <div class="archive-content">
        <?php if (have_posts()) : ?>
            <div class="row">
                <?php while (have_posts()) : the_post(); ?>
                    <div class="col-md-6 col-lg-4">
                        <article class="archive-item">
                            <?php if (has_post_thumbnail()) : ?>
                                <div class="archive-thumbnail">
                                    <?php the_post_thumbnail('medium'); ?>
                                </div>
                            <?php endif; ?>
                            <div class="archive-details">
                                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                                <div class="archive-meta">
                                    <span class="date"><?php echo get_the_date(); ?></span>
                                    <span class="author"><?php the_author(); ?></span>
                                </div>
                                <div class="archive-excerpt">
                                    <?php the_excerpt(); ?>
                                </div>
                            </div>
                        </article>
                    </div>
                <?php endwhile; ?>
            </div>
            
            <?php the_posts_pagination(); ?>
            
        <?php else : ?>
            <p>没有找到文章</p>
        <?php endif; ?>
    </div>
</div>

<style>
.archive-container {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.archive-header {
    text-align: center;
    margin-bottom: 40px;
}

.archive-title {
    font-size: 2.5em;
    color: #333;
}

.archive-description {
    color: #666;
    margin-top: 20px;
}

.archive-item {
    margin-bottom: 30px;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.archive-item:hover {
    transform: translateY(-5px);
}

.archive-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.archive-details {
    padding: 20px;
}

.archive-details h2 {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.archive-meta {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px;
}

.archive-meta span {
    margin-right: 15px;
}

.archive-excerpt {
    color: #666;
    font-size: 0.9em;
}

.navigation {
    margin-top: 40px;
    text-align: center;
}
</style>

<?php get_footer(); ?>
